{% extends 'base.html' %}
{% load static %}

{% block title %}仪表盘 - Allen监控系统{% endblock %}

{% block extra_css %}
<link href="{% static 'css/dashboard.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <!-- 统计卡片 -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                总资产数量</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_assets }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-server fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                在线设备</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ online_devices }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                告警数量</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ alert_count }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exclamation-triangle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                机房数量</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ idc_count }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-building fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 资产状态分布图 -->
        <div class="col-xl-6 col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">资产状态分布</h6>
                </div>
                <div class="card-body">
                    <div class="chart-pie">
                        <canvas id="assetStatusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最近告警列表 -->
        <div class="col-xl-6 col-lg-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">最近告警</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>设备</th>
                                    <th>告警内容</th>
                                    <th>级别</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for alert in recent_alerts %}
                                <tr>
                                    <td>{{ alert.created_at|date:"Y-m-d H:i" }}</td>
                                    <td>{{ alert.device.name }}</td>
                                    <td>{{ alert.message }}</td>
                                    <td>
                                        <span class="badge {% if alert.level == 'critical' %}bg-danger
                                                         {% elif alert.level == 'warning' %}bg-warning
                                                         {% else %}bg-info{% endif %}">
                                            {{ alert.get_level_display }}
                                        </span>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="4" class="text-center">暂无告警信息</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 资产状态分布图
    var ctx = document.getElementById('assetStatusChart').getContext('2d');
    var assetStatusChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: {{ status_labels|safe }},
            datasets: [{
                data: {{ status_data|safe }},
                backgroundColor: [
                    '#4e73df',  // 使用中
                    '#1cc88a',  // 闲置
                    '#36b9cc',  // 维修中
                    '#e74a3b'   // 已报废
                ],
                hoverBackgroundColor: [
                    '#2e59d9',
                    '#17a673',
                    '#2c9faf',
                    '#be2617'
                ],
                hoverBorderColor: "rgba(234, 236, 244, 1)",
            }],
        },
        options: {
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            },
            cutout: '70%'
        }
    });

    // 实时更新数据
    function updateDashboard() {
        fetch('{% url "dashboard_data" %}')
            .then(response => response.json())
            .then(data => {
                // 更新统计卡片
                document.querySelector('.text-primary + .h5').textContent = data.total_assets;
                document.querySelector('.text-success + .h5').textContent = data.online_devices;
                document.querySelector('.text-warning + .h5').textContent = data.alert_count;
                document.querySelector('.text-info + .h5').textContent = data.idc_count;

                // 更新图表数据
                assetStatusChart.data.datasets[0].data = data.status_data;
                assetStatusChart.update();
            });
    }

    // 每60秒更新一次数据
    setInterval(updateDashboard, 60000);
});
</script>
{% endblock %} 